<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
	<meta charset="utf-8">
	<title>故障模拟演习</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="description">
	<meta content="" name="author">
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN PAGE STYLES -->
	<link href="../assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" />
	<!-- END PAGE STYLES -->
	<!-- BEGIN THEME STYLES -->
	<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
	<link href="../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
	<link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
	<link href="../assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="logo.png">
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->

<body>

	<div id="app">
		<!-- BEGIN PAGE CONTAINER -->
		<div class="page-container" v-cloak>
			<!-- BEGIN PAGE CONTENT -->
			<div class="page-content">
				<div class="container">
					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12">
							<!-- BEGIN PORTLET-->
							<div class="portlet light tasks-widget simulate">
								<div class="portlet-title tabbable-line">
									<div class="caption caption-md">
										<i class="icon-globe theme-font hide"></i>
										<span class="caption-subject theme-font bold uppercase">模拟演习</span>
									</div>
								</div>
								<div class="portlet-body">
									<form role="form">
										<div class="form-body">
											<div class="form-group">
												<label class="font-sm font-grey-mint">选择模拟故障的线路</label>
												<select class="form-control" v-model="link.linkId">
													<option v-for="(el,lid) in links" v-bind:value="el.linkId"
														v-text="el.linkName"></option>
												</select>
											</div>

											<div class="form-group">
												<label class="font-sm font-grey-mint">输入模拟故障点距起点的距离（米）</label>
												<input class="form-control" type="text" placeholder="请输入"
													v-model="link.statusValue">
											</div>
											<div class="form-group">
												<label class="font-sm font-grey-mint">故障类型</label>
												<select class="form-control" v-model="link.status">
													<option>中断</option>
													<option>衰减</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<a href="GZGJ0.html" type="submit" class="btn blue btn-block"
												@click="toRun($event)">模拟演习</a>
										</div>
									</form>
								</div>
							</div>
						</div>
						<!-- END PORTLET-->
					</div>
				</div>

				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
		<!-- END PAGE CONTENT -->
	</div>

	<!-- END PAGE CONTAINER -->
	</div>
	<!-- BEGIN JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->

	<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
	<script src="assets/layer/layer.js" type="text/javascript"></script>
	<script src="assets/js/vue.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/xlsx.full.min.js"></script>
	<script src="assets/js/config.js"></script>
	<script src="assets/js/http.js"></script>
	<script>
		jQuery(document).ready(function () {
			const { createApp } = Vue;
			const app = createApp({
				data() {
					return {
						links: [],
						selected: 0,
						link: {
							linkId: 0,
							linkName: "",
							status: "中断",
							statusValue: "",
							gaojingType: 0
						}
					}
				},
				methods: {
					async load() {
						layer.load(0, { msg: "努力加载中，请稍后..." });
						axios.post(config.getUrl() + "/getLinks", {}).then(res => {
							if (res.status == 200) {
								console.log(res);
								if (res.data.code == 0) {
									layer.closeAll()
									if (res.data.data instanceof Array || res.data.data.lenght > 0) {
										this.links = res.data.data;
									}
								} else {
									layer.closeAll();
									layer.alert("获取链路失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
									try {
										console.log(aaa);
									} catch (error) {
										console.log(error);
									}
								}
							} else {
								layer.closeAll();
								layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								try {
									console.log(aaa);
								} catch (error) {
									console.log(error);
								}
							}
						}).then(res => {
							console.log("bbb");
							if (this.links.length > 0) {
								console.log("ccc");
								this.link.linkId = this.links[0]['linkId']
								console.log(this.link);
							}
						})
					},
					toRun(e) {
						e.preventDefault()
						console.log(this.link);
						layer.load(0, { msg: "努力加载中，请稍后..." });
						this.link.gaojingType = 0;
						post(config.getUrl() + "/saveGaojing", this.link, (res, resolve, reject) => {
							try {
								console.log(res);
								layer.closeAll();
								if (res.status == 200) {
									console.log(res);
									if (res.data.code == 0) {
										layer.msg(res.data.msg, { icon: 1, time: 3000 });
										resolve(res.data)
									} else {
										layer.closeAll();
										layer.msg(res.data.msg, { icon: 1, time: 3000 });
										reject(false)
									}
								} else {
									layer.closeAll();
									layer.msg("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
									reject(false)
								}
							} catch (error) {
								console.log(error);
								layer.msg("未知错误", { icon: 1, time: 3000 });
								reject(false)
							}
						}).then(ress => {							
							console.log(ress);
							return post(config.getUrl() + "/setAlarm", ress.data, (res, resolve, reject) => {
								try {
									layer.load(0, { msg: "努力加载中，请稍后..." });
									if (res.status == 200) {
										if (res.data.code == 0) {
											console.log(res.data);
											resolve(res.data)
											//window.open(`http://127.0.0.1:5500/gzgj?gaojingId=${res.data.gaojing.gaojingId}`
											window.location.href = `${config.baseUrl}/mnyxing`
											layer.closeAll();
										} else {
											reject(false)
											layer.closeAll();
										}
									} else {
										layer.closeAll();
										reject(false)
										layer.msg("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
									}
								} catch (error) {
									console.log(error);
									reject(false)
									layer.msg("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						}).then(res => {
							console.log("res=>",res);
						})
						/* axios.post(config.getUrl() + "/saveGaojing",this.link).then(res => {
							try {
								layer.closeAll();
								if(res.status == 200){
									console.log(res);
									if(res.data.code == 0){
										return res.data;
										layer.alert(res.data.msg,{icon:1,time:3000});
										//window.location.href = `${config.baseUrl}/gzgj?linkId=${this.link.linkId}`
									}else{
										layer.closeAll();
										layer.alert(res.data.msg,{icon:1,time:3000});
										try {
											console.log(aa);
										} catch (error) {
											console.log(error);
										}
									}
								}else{
									layer.closeAll();							
									layer.msg("网络连接失败，请联系管理员",{icon:1,time:3000});
									try {
										console.log(aa);
									} catch (error) {
										console.log(error);
									}
								}
							} catch (error) {
								console.log(error);						
								layer.msg("未知错误",{icon:1,time:3000});
							}					
						}).then(res => {
							try {
								layer.load(0,{msg:"努力加载中，请稍后..."});
								axios.post(config.getUrl() + "/setAlarm",res.data).then(rs => {
									if(rs.status == 200){
										if(rs.data.code == 0){
											console.log(res.data);
											//window.open(`http://127.0.0.1:5500/gzgj?gaojingId=${res.data.gaojing.gaojingId}`)
											window.location.href = `${config.baseUrl}/mnyxing`
											layer.closeAll();
										}else{
											layer.closeAll();
										}
									}else{
										layer.closeAll();
										try {
											console.log(aa);
										} catch (error) {
											console.log(error);
										}
										layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
									}
								})
							} catch (error) {
								console.log(error);
							}
						}) */
					}
				},
				created() {
					this.load()
				},
				watch: {
					"link.linkId": {
						handler(nv, old) {
							console.log(nv);
							if (this.links.length > 0) {
								for (var i = 0; i < this.links.length; i++) {
									if (nv == this.links[i]['linkId']) {
										this.link.linkName = this.links[i]['linkName'];
										this.link.lineName = this.links[i]["lineName"];
										this.link.times = this.links[i]["times"];
										this.link.cancat = this.links[i]["cancat"];
										this.link.works = JSON.parse(this.links[i]["works"]);
									}
								}
							}
						},
						immediate: true,
						deep: true
					}
				}
			})
			app.mount("#app")
		})
	</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->

</html>